<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container" style="padding: 10px;">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">区域</label>
        <el-input v-model="query.area" clearable placeholder="请输入区域搜索" style="width: 185px;" class="filter-item"
          @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">地点</label>
        <el-input v-model="query.location" clearable placeholder="请输入地点搜索" style="width: 185px;" class="filter-item"
          @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">名称</label>
        <el-input v-model="query.name" clearable placeholder="请输入名称搜索" style="width: 185px;" class="filter-item"
          @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">组织</label>
        <el-input v-model="query.organization" clearable placeholder="请输入组织搜索" style="width: 185px;" class="filter-item"
          @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">安装时间</label>
        <date-range-picker v-model="query.buildingTime" start-placeholder="开始时间" end-placeholder="结束时间"
          class="date-item" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
        :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="创建者">
            <el-input v-model="form.createBy" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="组织" prop="organization">
            <el-input v-model="form.organization" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="区域" prop="area">
            <el-input v-model="form.area" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="地点" prop="location">
            <el-input v-model="form.location" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="经度" prop="lat">
            <el-input v-model="form.lat" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="纬度" prop="lon">
            <el-input v-model="form.lon" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="安装时间">
            <el-date-picker v-model="form.buildingTime" type="datetime" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <div @click.self="otherClick" v-loading="crud.loading" style="margin-top: 1%;display: flex;flex-wrap: wrap;">
        <!-- 产品列表 -->
        <div @click="selectionChange(item)" v-for="(item, index) in crud.data" :key="index"
          style="width: 20%;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); min-width: 420px;margin-left: 2%;margin-bottom: 2%;display: flex;flex-direction: column;padding: 10px;border: 8px #655D5D;font-size: 14px;">
          <div style="border-bottom: 1px solid #e6e6e6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
            <div style="height: 50px;padding: 10px;display: flex;align-items: center;justify-content: flex-start;">
              <el-tooltip class="item" effect="dark" :content="item.createBy" placement="top-start">
                <span style="max-width: 120px;color: #0077AA;font-size: 22px;">{{ item.createBy }}</span>
              </el-tooltip>
              <span style="color: gray;font-size: 22px;margin-left: 4px;">/</span>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                <span style="max-width: 140px;color: #55aa7f;margin-left: 4px;font-weight: 600;">
                  {{item.name}}
                </span>
              </el-tooltip>
            </div>
            <div class="flex flex-row items-center justify-end" v-if="checkPer(['admin', 'product:edit', 'product:del'])">
              <udOperation :data="item" :permission="permission" />
            </div>
          </div>
          <div style="margin-top: 2%;display: flex;flex-direction: row;">
            <div style="display: flex;flex-direction: row;justify-content: space-between;width: 70%;">
              <div style="padding: 10px;display: flex;flex-direction: column;">
                <el-tooltip class="item" effect="dark" :content="item.organization" placement="top-start">
                  <span class="elli" style="max-width: 16em;color: #414141;margin-bottom: 8px;">
                    <i class="el-icon-school" style="color: #414141;margin-right: 5px;"></i>
                    所属组织：{{ item.organization }}
                  </span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="item.area" placement="top-start">
                  <span class="elli" style="max-width: 16em;color: #005CC5;margin-bottom: 8px;">
                    <i class="el-icon-edit" style="color: #005CC5;margin-right: 5px;"></i>
                    区域：{{ item.area }}
                  </span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="item.location" placement="top-start">
                  <span class="elli" style="max-width: 16em;color: #aa0000;margin-bottom: 8px;">
                    <i class="el-icon-location-information" style="color: #aa0000;margin-right: 5px;"></i>
                    地点：{{ item.location }}
                  </span>
                </el-tooltip>
                <span style="font-size: 0.7rem;color: gray;">安装时间：{{ item.buildingTime }}</span>
              </div>
              <div style="width: 1px;height: 100%;background-color: #cac5c5;"></div>
            </div>
            <div style="flex: 1;align-items: center;display: flex;flex-direction: column;justify-content: center;">
              <span
                @click="routerTo(item)"
                style="color: #0077AA;font-size: 18px;cursor: pointer;margin-bottom: 8px;"
                v-text="cabinetCount(item.smartModules)" />
              <span>仓位总数</span>
            </div>
          </div>
        </div>
      </div>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
  import crudCabinet from '@/api/cabinet/cabinet.js'
  import cabinet from '@/api/cabinet/cabinet.js'
  import CRUD, {
    presenter,
    header,
    form,
    crud
  } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import DateRangePicker from '@/components/DateRangePicker'

  const defaultForm = {
    cabinetId: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    area: null,
    buildingTime: null,
    lat: null,
    location: null,
    lon: null,
    name: null,
    organization: null
  }
  export default {
    name: 'Cabinet',
    components: {
      pagination,
      crudOperation,
      rrOperation,
      udOperation,
      DateRangePicker
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({
        title: '充电桩信息',
        url: 'api/cabinet',
        idField: 'cabinetId',
        sort: 'cabinetId,desc',
        crudMethod: {
          ...crudCabinet
        }
      })
    },
    mounted(){
      cabinet.get().then(res => {
        console.log(res)
      })
    },
    data() {
      return {
        list: [],
        permission: {
          add: ['admin', 'cabinet:add'],
          edit: ['admin', 'cabinet:edit'],
          del: ['admin', 'cabinet:del']
        },
        rules: {
          area: [{
            required: true,
            message: '区域不能为空',
            trigger: 'blur'
          }],
          lat: [{
            required: true,
            message: '经度不能为空',
            trigger: 'blur'
          }],
          location: [{
            required: true,
            message: '地点不能为空',
            trigger: 'blur'
          }],
          lon: [{
            required: true,
            message: '纬度不能为空',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }],
          organization: [{
            required: true,
            message: '组织不能为空',
            trigger: 'blur'
          }],
          buildingTime: [{
            required: true,
            message: '请选择安装时间',
            trigger: 'blur'
          }]
        },
        queryTypeOptions: [{
            key: 'area',
            display_name: '区域'
          },
          {
            key: 'location',
            display_name: '地点'
          },
          {
            key: 'name',
            display_name: '名称'
          },
          {
            key: 'organization',
            display_name: '组织'
          }
        ]
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        return true
      },
      selectionChange(item) {
        if (this.list.length && this.list[0] === item) {
          this.list = [];
        } else if (item) {
          this.list = [item];
        }
        this.crud.selectionChangeHandler(this.list);
      },
      otherClick() {
        this.list = [];
        this.crud.selectionChangeHandler(this.list);
      },
      routerTo(item) {
        const query = item;
        this.$router.push({
          // 核心语句
          path: '/cabinet/meterList', // 跳转的路径
          query
        });
        this.$emit('transmission', query);
      },
      cabinetCount(item) {
        var cnt = 0;
        item.forEach(smart => {
          cnt += smart.state.length;
        })
        return cnt + '个'
      }
    }
  }
</script>

<style scoped>

</style>
